<template>
    <div>
 <h1>显示</h1>

 <table class="table">
    <thead>
        <tr>
            <td>名称</td>
            <td>邮箱</td>
            <td>手机号</td>
            <td>班级号</td>
        </tr>
    </thead>
    <tbody>
          <tr v-for="d in data">
            <td>{{ d.name}}</td>
            <td>{{ d.phone}}</td>
            <td>{{ d.phone}}</td>
            <td>{{ d.banjihao}}</td>
        </tr>
    </tbody>  
 </table>
    </div>

    一共{{ pageinfo.pagecount}}页  当前{{ page.pageindex }}页  一共{{ pageinfo.count}}行   每页显示{{ page.pagesize }}行
     <input type="button" value="首页" @click="fanye(1)">
     <input type="button" value="上一页" @click="fanye(2)">
     <input type="button" value="下一页" @click="fanye(3)">
     <input type="button" value="尾页" @click="fanye(4)">
     <select v-model="page.pagesize" @change="xiala">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>
        <input v-for="d in pageinfo.pagecount" type="button" :value="d" @click="xiaxiaixa(d)">
        <input type="number" v-model="page.pageindex"><input type="button" value="跳转" @click="tiaozhuan">
        
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/success';
const success=useUserStore();
const router=useRouter();

const rb=()=>{
    if(success.data.name==""){
        alert('您还没有登录请先登录')
        router.push({path: '/dl'})
    }
}



const xiaxiaixa=(val:any)=>{
  page.value.pageindex=val;
  xianshi();
}

const tiaozhuan=()=>{
    if(page.value.pageindex<=pageinfo.value.pagecount&&page.value.pageindex>0)
{
    xianshi();
}
else{
    page.value.pageindex=1;
    xianshi();
}
}

const xiala=()=>{
    page.value.pageindex=1;
    xianshi();
}
const fanye=(val:any)=>{
  if(val==1)
  {
    page.value.pageindex=1;
    xianshi();
  }
  if(val==2)
  {
    if(page.value.pageindex>1)
  {
    page.value.pageindex-=1
    xianshi();
  }
  }
  if(val==3)
  {
   if(page.value.pageindex<pageinfo.value.pagecount)
   {
    page.value.pageindex+=1;
    xianshi();
   }
  }
  if(val==4)
  {
    if(page.value.pageindex=pageinfo.value.pagecount)
    xianshi();
  }
}






const data=ref([{
  "email": "1713379020@qq.com",
      "phone": "16652746209",
      "banjihao": "101",
      "id": 1,
      "name": "张胜男"
}])



const page=ref({
    pageindex:1,
    pagesize:3,
})

const pageinfo=ref({
    count:0,
    pagecount:0
})

const xianshi=()=>{
    axios.get("https://localhost:7263/api/xues/xianshi",{params:page.value}).then(res=>{
        data.value=res.data.list;

        pageinfo.value.count=res.data.count;
        pageinfo.value.pagecount=Math.ceil(pageinfo.value.count/page.value.pagesize);
    })
}

onMounted(()=>{
  xianshi();
  rb();
})



</script>

<style scoped>

</style>